<template>
  <div class="address-page">
    <!-- 导航栏 -->
    <van-nav-bar title="地址管理" left-text="返回" @click-left="$router.back()"/>

    <!-- 地址列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      :immediate-check="false"
    >
      <van-cell
        v-for="(address, index) in addressList"
        :key="index"
        :title="address.name + '，' + address.tel"
        :label="address.province + address.city + address.county + address.detail"
        :is-link="true"
        @click="goToEditAddress(address)"
      >
        <template #right-icon>
          <van-icon
            name="delete"
            @click.stop="deleteAddress(index)"
            style="font-size: 18px; color: #ee0a24"
          />
        </template>
      </van-cell>
    </van-list>

    <!-- 添加地址按钮 -->
    <van-button
      type="primary"
      block
      @click="goToAddAddress"
      :disabled="addingAddress"
    >
      添加地址
    </van-button>
  </div>
</template>

<script>
import {NavBar, List, Cell, Button, Icon, Notify} from "vant";
import axios from "axios";

export default {
  components: {
    VanNavBar: NavBar,
    VanList: List,
    VanCell: Cell,
    VanButton: Button,
    VanIcon: Icon
  },
  data() {
    return {
      // 地址列表数据
      addressList: [],
      // 是否正在加载数据
      loading: false,
      // 是否已加载完所有数据
      finished: false,
      // 是否正在添加地址，用于控制添加按钮是否可点击
      addingAddress: false,
      // 省市区数据列表
      areaList: {}
    };
  },
  mounted() {
    // 获取省市区数据
    this.fetchAreaList();
    // 获取初始地址列表
    this.fetchAddressList();
  },
  methods: {
    // 获取省市区数据
    fetchAreaList() {
      // 这里假设通过axios从接口获取省市区数据，实际情况请替换为真实接口
      const apiKey = '686ad114c62672834aa21b34fbcb4b6c';
      const url = `https://restapi.amap.com/v3/config/district?keywords=中国&subdistrict=1&key=${apiKey}`;
      console.log(url + "+++++++++++++++++")
      axios.get(url).then((response) => {
        this.areaList = response.data;
      })
        .catch((error) => {
          console.error("获取省市区数据失败：", error);
        });
    },
    // 获取地址列表数据
    fetchAddressList() {
      this.loading = true;
      // 这里假设通过axios从接口获取地址列表数据，实际情况请替换为真实接口
      axios.post("/admin/n-address/findAddressById?id=" + localStorage.getItem("userId")).then((response) => {
        console.log(localStorage.getItem("userId"))
        this.addressList = response.data.data.list;
        this.loading = false;
        this.finished = true;
      })
        .catch((error) => {
          console.error("获取地址列表数据失败：", error);
          this.loading = false;
        });
    },
    // 加载更多地址数据（如果有分页需求）
    onLoad() {
      // 这里可以添加加载更多的逻辑，比如请求下一页地址数据
      this.loading = false;
      this.finished = true;
    },
    // 前往添加地址页面
    goToAddAddress() {
      this.addingAddress = true;
      // 这里假设使用vue-router进行页面跳转，跳转到添加地址页面
      this.$router.push({name: "AddressView", params: {areaList: this.areaList}});
    },
    // 前往修改地址页面
    goToEditAddress(address) {
      // 这里假设使用vue-router进行页面跳转，跳转到修改地址页面，并传递地址信息和省市区数据
      this.$router.push({

        name: "AddressView", params: {address: address, areaList: this.areaList}
      });
    },
    // 删除地址
    deleteAddress(index) {
      // 这里假设通过axios向接口发送删除请求，实际情况请替换为真实接口
      Notify({type: 'success', message: '删除成功'});
      axios.delete(`/admin/n-address/deleteAddress?id=${this.addressList[index].id}`).then(() => {
        // 删除成功后，更新地址列表
        this.addressList.splice(index, 1);
      }).catch((error) => {
        console.error("删除地址失败：", error);
      });
    }
  }
};
</script>

<style scoped>
.address-page {
  padding: 10px;
}
</style>
